<template>
  <div :id="id">
    <!-- 单据详情111 -->
    <div :class="$style.title">
      <span>缝制副件-主料</span>

      <span v-if="showPrice" :class="$style.totalPrice"
        >总计：{{ mainMaterialAllPrice() }} 元</span
      >
    </div>
    <a-table
      :scroll="{ x: 2400 }"
      :class="$style.table"
      :columns="mainMaterialsInfosColumns"
      :data-source="materialInfo.mainMaterialsInfos"
      :pagination="false"
    >
      <span slot="unitPrice" slot-scope="record">
        <span v-if="disabled">
          <a-input-number
            v-model.trim="record.unitPrice"
            name="input"
            :default-value="0"
            :disabled="disabled"
            :min="0"
            :precision="4"
            :step="0.0001"
          />
        </span>
        <validating-input v-else :validate-val="record.unitPrice">
          <a-input-number
            v-model.trim="record.unitPrice"
            name="input"
            :default-value="0"
            :disabled="disabled"
            :min="0"
            :precision="4"
            :step="0.0001"
          />

          <!--  {{record.unitPrice}}测试123-  -->
        </validating-input>
      </span>
      <span slot="unitUseNum" slot-scope="record">
        <span v-if="disabled">
          <a-input-number
            v-if="record.unit === '米'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="0.01"
            :precision="2"
            :formatter="value => `${value} `"
          />
          <a-input-number
            v-if="record.unit === '个'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="1"
            :precision="0"
            :formatter="value => `${value} `"
          />
          {{ record.unit }}
        </span>
        <validating-input v-else :validate-val="record.unitUseNum">
          <a-input-number
            v-if="record.unit === '米'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="0.01"
            :precision="2"
            :formatter="value => `${value} `"
          />

          <a-input-number
            v-if="record.unit === '个'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="1"
            :precision="0"
            :formatter="value => `${value} `"
          />
          {{ record.unit }}
        </validating-input>
      </span>
      <span slot="lossRate" slot-scope="record">
        <span v-if="disabled">
          <a-input-number
            v-model.trim="record.lossRate"
            name="input"
            :disabled="disabled"
            :min="0"
            :max="0.9999"
            :step="0.0001"
            :formatter="value => `${value * 100}`"
            :parser="value => value / 100"
          />
        </span>
        <validating-input v-else :validate-val="record.lossRate">
          <!--
          <a-input-number
            v-model.trim="record.lossRate"
            :disabled="disabled"
            :min="0"
            :precision="2"
            :max="0.99"
            :step="0.01" />-->
          <inputNumber v-model="record.lossRate" />
          <!-- 2099 -->
        </validating-input>
      </span>
      <span slot="price" slot-scope="record">
        {{
          disabled
            ? record.price
            : (
                (record.unitPrice * record.unitUseNum) /
                (1 - record.lossRate)
              ).toFixed(4)
        }}
      </span>
    </a-table>

    <div :class="$style.title">
      <span>缝制副件-成衣辅料</span>
      <span v-if="showPrice" :class="$style.totalPrice"
        >总计：{{ garmentAccessoriesAllPrice() }} 元</span
      >
    </div>
    <a-table
      :scroll="{ x: 2400 }"
      :class="$style.table"
      :columns="garmentAccessoriesInfosColumns"
      :data-source="materialInfo.garmentAccessoriesInfos"
      :pagination="false"
    >
      <span slot="unitPrice" slot-scope="record">
        <span v-if="disabled">
          <a-input-number
            v-model.trim="record.unitPrice"
            name="input"
            :disabled="disabled"
            :min="0"
            :precision="4"
            :step="0.0001"
          />
        </span>
        <validating-input v-else :validate-val="record.unitPrice">
          <a-input-number
            v-model.trim="record.unitPrice"
            name="input"
            :disabled="disabled"
            :min="0"
            :precision="4"
            :step="0.0001"
          />
        </validating-input>
      </span>
      <span slot="unitUseNum" slot-scope="record">
        <span v-if="disabled">
          <a-input-number
            v-if="record.unit === '米'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="0.01"
            :precision="2"
            :formatter="value => `${value} `"
          />
          <a-input-number
            v-if="record.unit === '个'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="1"
            :precision="0"
            :formatter="value => `${value} 个`"
          />
        </span>
        <validating-input v-else :validate-val="record.unitUseNum">
          <a-input-number
            v-if="record.unit === '米'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="0.01"
            :precision="2"
            :formatter="value => `${value} `"
          />

          <a-input-number
            v-if="record.unit === '个'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="1"
            :precision="0"
            :formatter="value => `${value} 个`"
          />
        </validating-input>
      </span>
      <span slot="lossRate" slot-scope="record">
        <span v-if="disabled">
          <a-input-number
            v-model.trim="record.lossRate"
            name="input"
            :disabled="disabled"
            :min="0"
            :max="0.9999"
            :step="0.0001"
            :formatter="value => `${value * 100}`"
            :parser="value => value / 100"
          />
        </span>
        <validating-input v-else :validate-val="record.lossRate">
          <inputNumber v-model="record.lossRate" />
          <!-- <a-input-number -->
          <!-- v-model.trim="record.lossRate" -->
          <!-- :disabled="disabled" -->
          <!-- :min="0" -->
          <!-- :max="0.9999" -->
          <!-- :step="0.0001" -->
          <!-- :formatter="value => `${value * 100}` > 100 ? 0 : `${value * 100}`" -->
          <!-- :parser="value =>(value/100)" -->
          <!-- @change="()=>{ record.lossRate = record.lossRate> 0.9999 ? 0 : record.lossRate }" /> -->
        </validating-input>
      </span>
      <span slot="price" slot-scope="record">
        {{
          disabled
            ? record.price
            : (
                (record.unitPrice * record.unitUseNum) /
                (1 - record.lossRate)
              ).toFixed(4)
        }}
      </span>
    </a-table>

    <div :class="$style.title">
      <span>缝制副件-包装辅料</span>
      <span v-if="showPrice" :class="$style.totalPrice"
        >总计：{{ packagingAccessoriesAllPrice() }} 元</span
      >
    </div>
    <a-table
      :scroll="{ x: 2400 }"
      :class="$style.table"
      :columns="packagingAccessoriesInfosColumns"
      :data-source="materialInfo.packagingAccessoriesInfos"
      :pagination="false"
    >
      <span slot="unitPrice" slot-scope="record">
        <span v-if="disabled">
          <a-input-number
            v-model.trim="record.unitPrice"
            name="input"
            :disabled="disabled"
            :min="0"
            :precision="4"
            :step="0.0001"
          />
        </span>
        <validating-input v-else :validate-val="record.unitPrice">
          <a-input-number
            v-model.trim="record.unitPrice"
            name="input"
            :disabled="disabled"
            :min="0"
            :precision="4"
            :step="0.0001"
          />
        </validating-input>
      </span>
      <span slot="unitUseNum" slot-scope="record">
        <span v-if="disabled">
          <a-input-number
            v-if="record.unit === '米'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="0.01"
            :formatter="value => `${Number(value).toFixed(2)} `"
          />
          <a-input-number
            v-if="record.unit === '个'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="1"
            :precision="0"
            :formatter="value => `${value} `"
          />
        </span>
        <validating-input v-else :validate-val="record.unitUseNum">
          <a-input-number
            v-if="record.unit === '米'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="0.01"
          />

          <a-input-number
            v-if="record.unit === '个'"
            v-model.trim="record.unitUseNum"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="1"
            :precision="0"
            :formatter="value => `${value} `"
          />
          {{ record.unit }}
        </validating-input>
      </span>
      <span slot="lossRate" slot-scope="record">
        <span v-if="disabled">
          <a-input-number
            v-model.trim="record.lossRate"
            name="input"
            :disabled="disabled"
            :min="0"
            :max="0.9999"
            :step="0.0001"
            :formatter="value => `${value * 100}`"
            :parser="value => value / 100"
          />
        </span>
        <inputNumber v-else v-model="record.lossRate" />

        <!-- <a-input-number -->
        <!-- v-else -->
        <!-- v-model="record.lossRate" -->
        <!-- :disabled="disabled" -->
        <!-- :min="0" -->
        <!-- :max="0.9999" -->
        <!-- :step="0.0001" -->
        <!-- :precision="2" -->
        <!-- :formatter="value => `${value * 100}` > 100 ? 0 : `${value * 100}`" -->
        <!-- :parser="value =>(value/100)" -->
        <!-- @change="()=>{ record.lossRate = record.lossRate> 0.9999 ? 0 : record.lossRate }" /> -->
      </span>
      <span slot="price" slot-scope="record">
        {{
          disabled
            ? record.price
            : (
                (record.unitPrice * record.unitUseNum) /
                (1 - record.lossRate)
              ).toFixed(4)
        }}
      </span>
    </a-table>

    <div :class="$style.title">
      <span>缝制副件-特殊工艺</span>
      <span v-if="showPrice" :class="$style.totalPrice"
        >总计：{{ specialProcessAllPrice() }} 元</span
      >
    </div>
    <a-table
      :class="$style.table"
      :columns="specialProcessInfosColumns"
      :data-source="materialInfo.specialProcessInfos"
      :pagination="false"
    >
      <span slot="price" slot-scope="record">
        <!-- showorderConform 采购订单管理  订单确认进行判断 逼不得已 -->
        <span v-if="showorderConform">{{ record.price }}</span>
        <span v-if="!showorderConform && disabled">
          <a-input-number
            v-model.trim="record.price"
            name="input"
            :disabled="disabled"
            :min="0"
            :precision="4"
            :step="0.0001"
          />
        </span>
        <validating-input
          v-if="!showorderConform && !disabled"
          style="width: 200px"
          :validate-val="record.price"
        >
          <a-input-number
            v-model.trim="record.price"
            name="input"
            :disabled="disabled"
            :min="0"
            :precision="4"
            :step="0.0001"
          />
        </validating-input>
      </span>
    </a-table>

    <div :class="$style.title">
      <span>工价</span>
      <span v-if="showPrice" :class="$style.totalPrice"
        >总计：{{ wagesAllPrice() }} 元</span
      >
    </div>
    <a-table
      :class="$style.table"
      :columns="wagesInfosColumns"
      :data-source="materialInfo.wagesInfos"
      :pagination="false"
    >
      <span slot="currencyType" slot-scope="text, rocord">
        {{ rocord.materialCategory || '此状态无数据' }}
      </span>
      <span slot="price" slot-scope="record">
        <span v-if="disabled">
          <a-input-number
            v-model.trim="record.price"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="0.0001"
          />
        </span>
        <validating-input v-else :validate-val="record.price">
          <a-input-number
            v-model.trim="record.price"
            name="input"
            :disabled="disabled"
            :min="0"
            :step="0.0001"
          />
        </validating-input>
      </span>
    </a-table>

    <template v-if="showPrice">
      <div :class="[$style.title, $style.otherPriceTitle]">
        <span>其他费用</span>
        <span v-if="status !== 'toBeQuoteDetails'" :class="$style.totalPrice"
          >总计：{{ otherAllPrice() }} 元</span
        >
      </div>
      <a-table
        :data-source="materialInfo.materialBidRecordOtherReqVos"
        :columns="materialBidRecordOtherColumns"
        :pagination="false"
      >
        <template slot="materialName" slot-scope="record">
          <validating-input :validate-val="record.materialName">
            <a-input
              v-model.trim="record.materialName"
              name="input"
              :max-length="20"
              :disabled="disabled"
            />
          </validating-input>
        </template>

        <template slot="materialDesc" slot-scope="record">
          <validating-input
            :validate-val="record.materialDesc || (disabled ? ' ' : '')"
          >
            <a-input
              v-model.trim="record.materialDesc"
              name="input"
              :max-length="500"
              :disabled="disabled"
            />
          </validating-input>
        </template>

        <template slot="sumPrice" slot-scope="record">
          <validating-input :validate-val="record.sumPrice">
            <a-input-number
              v-model.trim="record.sumPrice"
              name="input"
              :disabled="disabled"
              :min="0"
              :precision="4"
              :step="0.0001"
            />
          </validating-input>
        </template>

        <template slot="action" slot-scope="text, record, index">
          <a-popconfirm
            title="确定要删除吗?"
            @confirm="
              () => {
                if (disabled) return
                onDeleteOtherMaterial(index)
              }
            "
          >
            <a v-if="!disabled" href="javascript:;">删除</a>
          </a-popconfirm>

          <span v-if="disabled" :class="$style.delButton">删除</span>
        </template>
      </a-table>

      <a-button
        v-if="
          materialInfo.materialBidRecordOtherReqVos &&
          materialInfo.materialBidRecordOtherReqVos.length < 10
        "
        :disabled="disabled"
        :class="$style.appendButton"
        icon="plus"
        @click="appendOtherPrice"
      >
        添加
      </a-button>
    </template>

    <template v-if="showPrice && showAllPrice">
      <!-- showAllPrice 工艺单确认不需要展示 -->
      <div :class="[$style.title, $style.otherPriceTitle]">
        <span>报价汇总</span>
      </div>

      <a-table
        :data-source="allPriceDataSource"
        :columns="allPriceColumns"
        :pagination="false"
      >
        <template slot="totalPrice" slot-scope="record">
          {{ sumPrice(record) }}
        </template>
      </a-table>
    </template>

    <a-divider />

    <div :class="$style.btnWrap">
      <template v-if="status === 'toBeQuoted'">
        <a-popconfirm
          title="是否确认提交该报价?"
          ok-text="是"
          cancel-text="否"
          @confirm="quoteConfirm"
        >
          <a-button
            type="primary"
            :class="$style.actionButton"
            @click="confirmSubmit"
          >
            提交报价
          </a-button>
        </a-popconfirm>
        <a-button :class="$style.actionButton" @click="quoteSave">
          保存
        </a-button>
      </template>

      <template v-if="status === 'reQuoting'">
        <a-popconfirm
          title="是否确认更新该报价?"
          ok-text="是"
          cancel-text="否"
          @confirm="quoteConfirm"
        >
          <a-button type="primary" @click="confirmSubmit"> 更新报价 </a-button>
        </a-popconfirm>
      </template>

      <template v-if="status === 'craftConfirm'">
        <a-popconfirm
          title="是否确认该工艺单?"
          ok-text="是"
          cancel-text="否"
          @confirm="craftConfirm"
        >
          <a-button type="primary" :class="$style.actionButton">
            工艺单确认
          </a-button>
        </a-popconfirm>

        <a-button
          type="danger"
          :class="$style.actionButton"
          @click="craftModalVisible = true"
        >
          退回
        </a-button>
      </template>

      <!-- 订单处理 -->
      <template v-if="status === 'handlePurchase'">
        <a-popconfirm
          title="是否确认接受该采购订单?"
          ok-text="是"
          cancel-text="否"
          @confirm="purchaseConfirm"
        >
          <a-button
            type="primary"
            :disabled="disabled"
            :class="$style.actionButton"
          >
            订单确认
          </a-button>
        </a-popconfirm>

        <a-button
          :class="$style.actionButton"
          :disabled="disabled"
          @click="purchaseModalVisible = true"
        >
          订单退回
        </a-button>
      </template>

      <a-button :class="$style.actionButton" @click="back"> 返回 </a-button>
    </div>

    <a-modal
      v-model="craftModalVisible"
      title="工艺单退回"
      :destroy-on-close="true"
      :footer="false"
    >
      <reject-form @submit="craftReject" />
    </a-modal>

    <a-modal
      v-model="purchaseModalVisible"
      title="采购单驳回"
      :destroy-on-close="true"
      :footer="false"
    >
      <reject-form @submit="purchaseReject" />
    </a-modal>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { message } from 'ant-design-vue'

import RejectForm from './RejectForm'
import ValidatingInput from './ValidatingInput'
import {
  mainMaterialsInfosColumns,
  garmentAccessoriesInfosColumns,
  packagingAccessoriesInfosColumns,
  specialProcessInfosColumns,
  wagesInfosColumns,
  editInputColumns,
  materialBidRecordOtherColumns,
  sumPriceColumns,
  allPriceColumns
} from './columns/materialInfo'
import { currency } from '../../types'
import inputNumber from './../../components/cpsInputNumber2'
export default {
  components: {
    RejectForm,
    ValidatingInput,
    inputNumber
  },
  data() {
    return {
      id: this.$route.fullPath,
      hidePrice: true, // 工价隐藏 !hidePrice
      whitePage: ['/purchase/handlePurchase'],
      status: '',
      showAllPrice: true,
      disabled: false,
      showorderConform: false, // 采购订单管理 电单车确认
      craftModalVisible: false,
      purchaseModalVisible: false,
      showPrice: false,
      currency,
      mainMaterialsInfosColumns,
      garmentAccessoriesInfosColumns,
      packagingAccessoriesInfosColumns,
      specialProcessInfosColumns,
      wagesInfosColumns,
      materialBidRecordOtherColumns,
      allPriceColumns,
      materialInfo: {},
      hiddenActions: [],
      disabledActions: []
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.info
    }),
    // 缝制副件-主料价格汇总

    allPriceDataSource: function () {
      const {
        mainMaterialAllPrice,
        garmentAccessoriesAllPrice,
        packagingAccessoriesAllPrice,
        specialProcessAllPrice,
        wagesAllPrice,
        otherAllPrice
      } = this

      const dataSource = [
        {
          key: '1',
          mainMaterialAllPrice: mainMaterialAllPrice(),
          garmentAccessoriesAllPrice: garmentAccessoriesAllPrice(),
          packagingAccessoriesAllPrice: packagingAccessoriesAllPrice(),
          specialProcessAllPrice: specialProcessAllPrice(),
          wagesAllPrice: wagesAllPrice(),
          otherAllPrice: otherAllPrice()
        }
      ]

      this.$emit('onPriceChange', this.sumPrice(dataSource[0]))
      return dataSource
    }
  },
  created() {
    this.updateTableColumns()
  },
  mounted() {
    //
    this.hidePrice = this.whitePage.includes(this.$route.path)
    console.log(this.$route.page)
    console.log('this.$$route')
    if (this.$route.fullPath.includes('purchase/handlePurchase')) {
      this.showorderConform = true
    }
    if (this.$route.fullPath.includes('/ProcessSheet/details')) {
      this.showAllPrice = false
      this.disabled = true
    } else {
      this.showAllPrice = true
    }
    this.getCraftMaterialInfo()
  },
  methods: {
    specialProcessAllPrice: function () {
      if (this.disabled) return this.materialInfo.specialProcessAllPrice
      const price = this.materialInfo.specialProcessInfos
        ? this.materialInfo.specialProcessInfos.reduce((prev, record) => {
            return prev + (record.price || 0)
          }, 0)
        : 0
      return price.toFixed(4)
    },

    mainMaterialAllPrice: function () {
      if (this.disabled) return this.materialInfo.mainMaterialAllPrice
      const price = this.materialInfo.mainMaterialsInfos
        ? this.materialInfo.mainMaterialsInfos.reduce((prev, record) => {
            record.price =
              (record.unitPrice * record.unitUseNum) / (1 - record.lossRate)
            return prev + (record.price || 0)
          }, 0)
        : 0
      return price.toFixed(4)
    },
    // 缝制副件-成衣辅料价格汇总
    garmentAccessoriesAllPrice: function () {
      if (this.disabled) return this.materialInfo.garmentAccessoriesAllPrice
      const price = this.materialInfo.garmentAccessoriesInfos
        ? this.materialInfo.garmentAccessoriesInfos.reduce((prev, record) => {
            return (
              Number(prev) +
              (record.unitPrice * record.unitUseNum) / (1 - record.lossRate)
            )
          }, 0)
        : 0
      return price.toFixed(4)
    },
    // 缝制副件-包装辅料价格汇总
    packagingAccessoriesAllPrice: function () {
      if (this.disabled) return this.materialInfo.packagingAccessoriesAllPrice
      const price = this.materialInfo.packagingAccessoriesInfos
        ? this.materialInfo.packagingAccessoriesInfos.reduce((prev, record) => {
            return (
              prev +
              (record.unitPrice * record.unitUseNum) / (1 - record.lossRate)
            )
          }, 0)
        : 0
      return price.toFixed(4)
    },
    // 缝制副件-特殊工艺价格汇总
    // 管理费用价格汇总
    wagesAllPrice: function () {
      if (this.disabled) return this.materialInfo.wagesAllPrice
      const price = this.materialInfo.wagesInfos
        ? this.materialInfo.wagesInfos.reduce((prev, record) => {
            return prev + (record.price || 0)
          }, 0)
        : 0
      return price.toFixed(4)
    },
    otherAllPrice: function () {
      if (this.disabled) return this.materialInfo.otherAllPrice
      const price = this.materialInfo.materialBidRecordOtherReqVos
        ? this.materialInfo.materialBidRecordOtherReqVos.reduce(
            (prev, record) => {
              return prev + record.sumPrice
            },
            0
          )
        : 0
      return price.toFixed(4)
    },
    async getCraftMaterialInfo() {
      try {
        const res = await this.$api.craft.craftMaterialInfo({
          taskId: this.$route.query.quoteId || this.$route.query.taskId,
          productId: this.$route.query.productId
        })

        this.materialInfo = res
      } catch (e) {
        console.error(e)
      }
    },
    updateTableColumns() {
      /**
       * toBeQuoteDetails 待报价详情
       *  toBeQuoted 报价
       *  reQuoting 重新报价
       *  quoteDetails 报价后详情
       *  craftConfirm 工艺单确认
       *  craftDetails 查看工艺单详情
       *  handlePurchase 处理采购单
       *  purchaseDetails 采购单详情
       * */
      const { status } = this.$route.query
      this.status = status

      this.hiddenActions = [
        'craftDetails',
        'craftConfirm',
        'handlePurchase',
        'purchaseDetails'
      ]

      this.disabledActions = [
        'toBeQuoteDetails',
        'quoteDetails',
        'craftDetails',
        'purchaseDetails'
      ]

      this.showPrice = [
        'toBeQuoted',
        'reQuoting',
        'reQuoting',
        'quoteDetails'
      ].includes(status)

      this.disabled = this.disabledActions.includes(status)

      if (!this.hiddenActions.includes(status)) {
        this.mainMaterialsInfosColumns = [
          ...mainMaterialsInfosColumns,
          ...editInputColumns
        ]

        this.garmentAccessoriesInfosColumns = [
          ...garmentAccessoriesInfosColumns,
          ...editInputColumns
        ]
        this.wagesInfosColumns = [...wagesInfosColumns, ...sumPriceColumns]
        this.packagingAccessoriesInfosColumns = [
          ...packagingAccessoriesInfosColumns,
          ...editInputColumns
        ]
      }
      this.specialProcessInfosColumns = [
        ...specialProcessInfosColumns,
        ...sumPriceColumns
      ]
    },
    sumPrice(record) {
      return Object.keys(record)
        .map(key => {
          if (key === 'key') return false
          return record[key]
        })
        .filter(item => item !== false)
        .reduce((all, currentValue) => {
          return all + Number(currentValue)
        }, 0)
        .toFixed(4)
    },
    async onDeleteOtherMaterial(index) {
      this.materialInfo.materialBidRecordOtherReqVos.splice(index, 1)
    },
    confirmSubmit() {
      console.log(2)
      console.log(document.getElementsByName('input'))
      const input = Array.from(document.getElementsByName('input')).map(_ => {
        return _.value
      })
      const req = input.every(_ => {
        return _
      }) // this.formatReqData()
      console.log(req)

      if (req === false) {
        this.$message.warn('请填写完整报价信息！')
      }
    },
    async quoteConfirm() {
      try {
        this.disabled = true
        const input = Array.from(document.getElementsByName('input')).map(_ => {
          return _.value
        })
        const req = input.every(_ => {
          return _
        }) // this.formatReqData()
        if (req === false) {
          this.$message.warn('请填写完整报价信息！')
          return
        }
        const re = this.formatReqData()

        const status = await this.$api.quotation.quoteConfirm(re)

        if (status === 'SUCCESS') {
          this.$message.success('提交成功')
          this.$router.go(-1)
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.disabled = false
      }
    },
    async craftConfirm() {
      const { bizScene, taskId } = this.$route.query
      try {
        this.disabled = true
        await this.$api.craft.craftConfirm({
          bizId: taskId,
          bizNo: taskId,
          bizScene: bizScene,
          operator: this.userInfo.username
        })
        message.success('已确认')
        // this.$router.back()
        window.history.back()
      } finally {
        this.disabled = false
      }
    },
    async craftReject({ remark }) {
      const { bizScene, taskId } = this.$route.query
      try {
        this.disabled = true
        await this.$api.craft.craftReject({
          bizId: taskId,
          bizNo: taskId,
          bizScene: bizScene,
          operator: this.userInfo.username,
          remark
        })

        message.success('已退回')
        this.$router.go(-1)
        this.craftModalVisible = false
      } finally {
        this.disabled = false
      }
    },
    async purchaseConfirm() {
      const { poNo, taskId } = this.$route.query
      try {
        this.disabled = true
        await this.$api.purchase.purchaseConfirm({
          id: taskId,
          operator: this.userInfo.username,
          poNo
        })

        message.success('采购单已确认')
        this.$router.go(-1)
      } finally {
        this.disabled = false
      }
    },
    async purchaseReject({ remark }) {
      const { poNo, taskId } = this.$route.query
      try {
        this.disabled = true
        await this.$api.purchase.purchaseReject({
          id: taskId,
          operator: this.userInfo.username,
          poNo,
          remark
        })

        message.success('采购单已退回')
        this.$router.go(-1)
        this.purchaseModalVisible = false
      } finally {
        this.disabled = false
      }
    },
    async quoteSave() {
      try {
        this.disabled = true
        const req = this.formatReqData()
        // if (req === false) {
        // this.$message.warn('请填写完整报价信息')
        // return
        // }
        const status = await this.$api.quotation.quoteSave(req)

        if (status === 'SUCCESS') {
          this.$message.success('保存成功')
          this.$router.go(-1)
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.disabled = false
      }
    },
    formatMaterialsData({
      lossRate,
      id,
      materialScene,
      price,
      unitPrice,
      unitUseNum
    }) {
      const { taskId } = this.$route.query
      const operator = this.userInfo.username

      let materialsData = {
        lossRate,
        materialId: id,
        materialScene,
        operator,
        sumPrice: price,
        taskId,
        unitPrice,
        unitUseNum
      }

      if (
        materialsData.materialScene === 4 ||
        materialsData.materialScene === 5
      ) {
        materialsData = {
          ...materialsData,
          lossRate: 0,
          unitPrice: 0,
          unitUseNum: 0
        }
      }

      const materialsList = Object.keys(materialsData).map(key => {
        return materialsData[key]
      })

      if (
        materialsList.includes('') ||
        materialsList.includes(undefined) ||
        materialsList.includes(null)
      ) {
        return false
      }

      return materialsData
    },
    formatOtherMaterialsData({ id, materialDesc, materialName, sumPrice }) {
      const { taskId } = this.$route.query
      const operator = this.userInfo.username

      const otherMaterials = {
        id,
        materialDesc,
        materialName,
        operator,
        sumPrice,
        taskId
      }

      const otherMaterialsList = Object.keys(otherMaterials).map(key => {
        if (key === 'id' && !otherMaterials[key]) {
          return 'id'
        }
        return otherMaterials[key]
      })

      if (
        otherMaterialsList.includes('') ||
        otherMaterialsList.includes(undefined) ||
        otherMaterialsList.includes(null)
      ) {
        return false
      }

      return {
        id,
        materialDesc,
        materialName,
        operator,
        sumPrice,
        taskId
      }
    },
    formatReqData() {
      const { taskId } = this.$route.query
      // 主料
      const mainMaterialsInfos = this.materialInfo.mainMaterialsInfos.map(
        this.formatMaterialsData
      )
      // 辅料
      console.log(
        'this.materialInfo.garmentAccessoriesInfos',
        this.materialInfo.garmentAccessoriesInfos
      )
      const garmentAccessoriesInfos =
        this.materialInfo.garmentAccessoriesInfos.map(_ => {
          return {
            taskId: taskId,
            materialId: _.id,
            lossRate: _.lossRate,
            operator: this.userInfo.username,
            unitPrice: _.unitPrice,
            unitUseNum: _.unitUseNum,
            materialScene: _.materialScene
          }
        })
      // 包装辅料
      const packagingAccessoriesInfos =
        this.materialInfo.packagingAccessoriesInfos.map(_ => {
          return {
            taskId: taskId,
            materialId: _.id,
            lossRate: _.lossRate,
            operator: this.userInfo.username,
            unitPrice: _.unitPrice,
            unitUseNum: _.unitUseNum,
            materialScene: _.materialScene
          }
        })
      // .map(_ => { return { taskId: _.taskId, sumPrice: _.sumPrice, materialId: _.materialId, lossRate: _.lossRate, operator: _.operator, id: _.id, unitPrice: _.unitPrice, unitUseNum: _.unitUseNum, materialScene: _.materialScene } })
      // 特殊工艺
      const specialProcessInfos = this.materialInfo.specialProcessInfos.map(
        this.formatMaterialsData
      )
      // 工价
      const wagesInfos = this.materialInfo.wagesInfos.map(
        this.formatMaterialsData
      )
      // 其他费用
      const materialBidRecordOtherReqDTOS =
        this.materialInfo.materialBidRecordOtherReqVos.map(
          this.formatOtherMaterialsData
        )

      const materialBidRecordReqDTOS = [
        ...mainMaterialsInfos,
        ...garmentAccessoriesInfos,
        ...packagingAccessoriesInfos,
        ...specialProcessInfos,
        ...wagesInfos
      ]
      console.log(
        materialBidRecordOtherReqDTOS,
        'materialBidRecordReqDTOS',
        materialBidRecordReqDTOS
      )
      console.log(
        garmentAccessoriesInfos,
        this.materialInfo.garmentAccessoriesInfos
      )
      if (
        materialBidRecordReqDTOS.includes(false) ||
        materialBidRecordOtherReqDTOS.includes(false)
      ) {
        return false
      }
      materialBidRecordReqDTOS.forEach(_ => {
        _.sumPrice = (_.sumPrice || 0).toFixed(4)
      })
      materialBidRecordOtherReqDTOS.forEach(_ => {
        _.sumPrice = (_.sumPrice || 0).toFixed(4)
      })
      return {
        id: taskId,
        materialBidRecordOtherReqDTOS,
        materialBidRecordReqDTOS
      }
    },
    appendOtherPrice() {
      const defaultValue = {
        materialDesc: '',
        materialName: '',
        operator: '',
        sumPrice: 0
      }

      this.materialInfo.materialBidRecordOtherReqVos.push(defaultValue)
    },
    back() {
      // this.$router.back()
      window.history.back()
    }
  }
}
</script>

<style lang="less" module>
.title {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 20px;

  .totalPrice {
    font-size: 18px;
    padding-right: 20px;
  }
}

.otherPriceTitle {
  margin-bottom: 10px;
}

.table {
  margin: 10px 0 50px;
}

.btnWrap {
  display: flex;
  justify-content: center;
}

.actionButton {
  display: inline-block;
  margin: auto 10px;
}

.appendButton {
  display: block;
  margin: 15px auto;
}

.delButton {
  color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  user-select: none;
}

:global {
  .ant-form-explain,
  .ant-form-extra {
    position: absolute;
  }

  .ant-form-item {
    margin-bottom: 5px;
  }
}
</style>
